<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/common.css">
<style>
    .screen-container {
        line-height: 32px;
        padding: 0 20px;
        background: #FFFFFF;
        box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.06);
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .screen-container-show {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        padding-bottom: 14px;
    }

    .screen-container-left,
    .screen-container-right {
        margin-top: 14px;
        flex-wrap: nowrap;
    }

    .order-refresh {
        width: 32px;
        height: 32px;
        border: 1px solid #E6E6E6;
        border-radius: 4px;
        margin-right: 14px;
        justify-content: center;
    }

    .order-refresh i {
        animation-duration: 2s;
        animation-iteration-count: infinite
    }

    .order-refresh .focusi {
        animation-name: go;

    }

    @keyframes go {
        0% {
            transform: rotateZ(0);
        }

        100% {
            transform: rotateZ(360deg);
        }
    }

    .screen {
        border-radius: 6px;
        padding: 10px 20px;
        margin-bottom: 10px;
    }

    .screen-title {
        justify-content: space-between;
        width: 100%;
    }

    .screen-con {
        display: flex;
        flex-wrap: wrap;
    }

    .header-select-item,
    .header-input-item,
    .header-button-item {
        margin-right: 30px;
        margin-bottom: 14px;
        width: 242px;
    }

    .header-select-item .el-select {
        width: 100px;
    }

    .header-input-item .header-input-tip {
        margin-right: 14px;
    }

    .header-input-item .el-input {
        width: 176px;
    }

    .order-time {
        padding: 0 6px;
        height: 32px;
        border: 1px solid #DCDFE6;
        border-radius: 4px 0px 0px 4px;
        border-right: none;
        flex-shrink: 0;
    }

    .arrow-close i {
        animation-iteration-count: infinite;
        transform: rotateZ(0deg);
    }

    .arrow-close {
        width: 36px;
        height: 32px;
        margin-left: 20px;
        background: #7438D5;
        border-radius: 4px;
        color: #fff;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .arrow-open {
        width: 36px;
        height: 32px;
        margin-left: 20px;
        background: #fff;
        border-radius: 4px;
        color: #7438D5;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #7438D5;

    }

    .arrow-close .arrow-container {
        transform: rotateZ(0deg);
        transition: transform .25s linear;
    }

    .arrow-open .arrow-container {
        transform: rotateZ(180deg);
        transition: transform .25s linear;
    }

    .sp-table {
        padding: 20px 20px 30px;
        margin-top: 10px;
        background: #fff;
    }

    .table-image {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        margin-right: 8px;
        flex-shrink: 0;
    }

    .page-container {
        justify-content: flex-end;
        margin-top: 30px;
    }
</style>
<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/moment.js"></script>
<div id="orderIndex" v-cloak>
    <div class="screen-container">
        <div class="screen-container-show">
            <div class="screen-container-left display-flex">
                <div class="order-refresh display-flex" @click="goOrderRefresh">
                    <i class="el-icon-refresh" :class="focusi?'focusi':''"></i>
                </div>
                <el-radio-group v-model="searchForm.status" fill="#7536D0" @change="getData(0,10)">
                    <el-radio-button label="all">全部</el-radio-button>
                    <el-radio-button label="cancel">已取消</el-radio-button>
                    <el-radio-button label="invalid">交易关闭</el-radio-button>
                    <el-radio-button label="nopay">待付款</el-radio-button>
                    <el-radio-button label="payed">已支付</el-radio-button>
                    <el-radio-button label="finish">已完成</el-radio-button>
                </el-radio-group>
            </div>
            <div class="screen-container-right display-flex">
                <div class="display-flex margin-right-20">
                    <div class="color-666 order-time">申请时间</div>
                    <el-date-picker v-model="searchForm.createtime" type="daterange" value-format="yyyy-MM-dd HH:mm:ss"
                        format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                        @change="getData(0,10)" align="right" size="small" :default-time="['00:00:00', '23:59:59']">
                    </el-date-picker>
                </div>
                <div :class="screenType?'arrow-open':'arrow-close'" @click="changeSwitch">
                    <div class="arrow-container">
                        <i class="el-icon-arrow-down"></i>
                    </div>
                </div>
            </div>
        </div>
        <el-collapse-transition>
            <div class="screen-con" v-if="screenType">
                <div class="display-flex header-select-item">
                    <el-input placeholder="请输入内容" v-model="searchForm.form_1_value" class="input-with-select"
                        size="small">
                        <el-select v-model="searchForm.form_1_key" slot="prepend" placeholder="请选择">
                            <el-option label="订单编号" value="order_sn"></el-option>
                            <el-option label="订单ID" value="id"></el-option>
                            <el-option label="支付单号" value="transaction_id"></el-option>
                        </el-select>
                    </el-input>
                </div>
                <div class="display-flex header-select-item">
                    <el-input placeholder="请输入内容" v-model="searchForm.form_2_value" class="input-with-select"
                        size="small">
                        <el-select v-model="searchForm.form_2_key" slot="prepend" placeholder="请选择">
                            <el-option label="会员ID" value="user_id"></el-option>
                            <el-option label="会员昵称" value="nickname"></el-option>
                            <el-option label="手机号" value="user_phone"></el-option>
                        </el-select>
                    </el-input>
                </div>
                <div class="display-flex header-input-item">
                    <div class="header-input-tip">订单来源</div>
                    <el-select v-model="searchForm.platform" placeholder="请选择订单来源" size="small">
                        <el-option :label="platform.name" :value="platform.type" v-for="platform in typeList.platform">
                        </el-option>
                    </el-select>
                </div>
                <div class="display-flex header-input-item">
                    <div class="header-input-tip">支付方式</div>
                    <el-select v-model="searchForm.pay_type" placeholder="请选择支付方式" size="small">
                        <el-option :label="pay.name" :value="pay.type" v-for="pay in typeList.pay_type">
                        </el-option>
                    </el-select>
                </div>
                <div class="header-button-item display-flex">
                    <el-button size="small" @click="screenEmpty">重置</el-button>
                    <el-button type="primary" size="small" @click="getData(0,10)">筛选</el-button>
                </div>
            </div>
        </el-collapse-transition>
    </div>
    <div class="sp-table">
        <el-table :data="orderList" style="width: 100%" ref="multipleTable" tooltip-effect="dark" stripe>
            <el-table-column prop="id" label="ID" min-width="100px">
            </el-table-column>
            <el-table-column prop="order_sn" label="订单号" width="220px">
            </el-table-column>
            <el-table-column label="用户" min-width="200px" align="left">
                <template slot-scope="scope">
                    <div>
                        <div class="display-flex" v-if="scope.row.user">
                            <el-image class="table-image" :src="scope.row.user.avatar"></el-image>
                            <div>
                                <div class="ellipsis-item">
                                    {{scope.row.user.nickname}}
                                </div>
                                <div>
                                    {{scope.row.user.mobile}}
                                </div>
                            </div>
                        </div>
                        <div v-else>{{scope.row.user_id}}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="支付金额" min-width="100px" align="left">
                <template slot-scope="scope">
                    <div class="ellipsis-item">
                        {{scope.row.total_fee}}元
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="status_name" label="支付状态" min-width="100px">
            </el-table-column>
            <el-table-column prop="pay_type_text" label="支付方式" min-width="100px">
            </el-table-column>
            <el-table-column prop="platform_text" label="订单来源" min-width="100px">
            </el-table-column>
            <el-table-column prop="platform_text" label="用户备注" min-width="200px">
                <template slot-scope="scope">
                    {{scope.row.remark || '-'}}
                </template>
            </el-table-column>
            <el-table-column label="下单时间" width="160px">
                <template slot-scope="scope">
                    {{moment(scope.row.createtime*1000).format("YYYY-MM-DD HH:mm:ss") || '-'}}
                </template>
            </el-table-column>
            <el-table-column label="支付时间" width="160px">
                <template slot-scope="scope">
                    {{scope.row.paytime_text || '-'}}
                </template>
            </el-table-column>
        </el-table>
        <div class="page-container display-flex">
            <el-pagination style="float: right;" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="10"
                layout="total, sizes, prev, pager, next, jumper" :total="totalPage">
            </el-pagination>
        </div>
    </div>
</div>